<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select
          v-model="queryInfo.category1Id"
          :disabled="show"
          placeholder="请选择"
          @change="handler1"
        >
          <el-option
            v-for="item in category1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="queryInfo.category2Id"
          :disabled="show"
          placeholder="请选择"
          @change="handler2"
        >
          <el-option
            v-for="item in category2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="queryInfo.category3Id"
          :disabled="show"
          placeholder="请选择"
          @change="handler3"
        >
          <el-option
            v-for="item in category3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCategory1Api, getCategory2Api, getCategory3Api } from '@/api/attr'

export default {
  name: 'CategorySelect',
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      category1: [],
      category2: [],
      category3: [],
      queryInfo: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
    }
  },
  created () {
    this.getCategory1()
  },
  methods: {
    async getCategory1 () {
      try {
        const result = await getCategory1Api()
        // console.log(result)
        this.category1 = result.data
      } catch (error) {
        console.log(error)
      }
    },
    async handler1 (category1Id) {
      this.category2 = []
      this.category3 = []
      this.queryInfo.category2Id = ''
      this.queryInfo.category3Id = ''
      try {
        this.$emit('getCategoryId', { categoryId: this.queryInfo.category1Id, level: 1 })
        const { data } = await getCategory2Api(category1Id)
        // console.log(data)
        this.category2 = data
      } catch (error) {
        console.log(error)
      }
    },
    async handler2 (category2Id) {
      this.category3 = []
      this.queryInfo.category3Id = ''
      try {
        this.$emit('getCategoryId', { categoryId: this.queryInfo.category2Id, level: 2 })
        const { data } = await getCategory3Api(category2Id)
        // console.log(data)
        this.category3 = data
      } catch (error) {
        console.log(error)
      }
    },
    handler3 () {
      this.$emit('getCategoryId', { categoryId: this.queryInfo.category3Id, level: 3 })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
